<template>
    <div class="fullmodal" v-if="value">
        <div class="fullcloth"></div>
        <div class="full-cnt">
            <div class="menu">
                <Icon type="md-close"  @click="close" class="close" title="关闭" />
            </div>
            <div class="full-content fix-scrollbar">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {

        }
    },
    methods:{
        close(){
            this.$emit('input',false)
        }
    }
}
</script>
<style lang="less">
    .fullmodal{
        position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 999;
        .fullcloth{
            background: #f1f3f6;
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: .9;
            z-index: -1;
        }
        .full-cnt{
            width: 90%;
            margin: 24px auto;
            .menu{
                overflow: hidden;
            }
            .close{
                color: #a3a3a3;
                font-size: 30px;
                float: right;
                cursor: pointer;
            }
            .full-content{
                margin: 0 auto;
                padding: 16px;
                width: 80%;
                height: calc(~ '100vh - 110px');
                background: #fff;
                opacity: .96;
                // height: calc(~ '100vh - 120px');
                overflow-y: auto;
            }
        }
    }
</style>


